<!-- 管理员承训专业任务专业详情 -->
<template>
  <div class="assessment-container" style="width: 100%;">
    <div class="plan-entry-table-container">
      <div style="margin:0 0 15px 0;text-align:left;">
      <!-- <el-button type="warning" icon="el-icon-circle-plus-outline" @click="tjzy">添加专业</el-button> -->
      <div
        class="cjrc-button"
        @click="tjzy"
        style="width: 130px;line-height: 28px"
      >
        <img src="@/assets/assessment/iconaddd.png" alt="" />
        <span>添加专业</span>
      </div>
      </div>
      <el-table
        :data="tableData"
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
          max-height="760"
      >
        <el-table-column prop="cz" label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex; margin: 0 auto">
              <div class="bk-lucj-import-button" @click="bj(scope.row)">
                <img
                  src="@/assets/assessment/icon-plan-record-detail.png"
                  alt=""
                />
                编辑
              </div>
              <div class="de-lucj-import-button" @click="sc(scope.row.id)">
                <img
                  src="@/assets/assessment/icon-delete.png"
                  alt=""
                  style="width:13px;height:13px"
                />
                删除
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="专业名称" align="center">
        </el-table-column>
        <el-table-column prop="simpleName" label="专业简称" align="center">
        </el-table-column>
        <el-table-column prop="collegeCode" label="院内代码" align="center">
        </el-table-column>
        <el-table-column prop="standardCode" label="标准代码" align="center">
        </el-table-column>
        <el-table-column prop="subjectType" label="学科门类" align="center">
        </el-table-column>
        <el-table-column prop="trainingLevel" label="培养层次" align="center">
        </el-table-column>
        <el-table-column
          prop="standardEduSystem"
          label="标准学制"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="grantDegree" label="授予学位" align="center">
        </el-table-column>
        <el-table-column prop="introduction" label="专业介绍" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right; margin: 10px 0;">
      <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- <el-dialog
      title="编辑专业详情"
      :visible.sync="showManualEntryDialog"
      width="50%"
      class="manual-entry-container"
    >
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column prop="name" label="专业名称" align="center">
          <el-input v-model="name"></el-input>
        </el-table-column>
        <el-table-column prop="simpleName" label="专业简称" align="center">
          <el-input v-model="simpleName"></el-input>
        </el-table-column>
        <el-table-column prop="collegeCode" label="院内代码" align="center">
          <el-input v-model="collegeCode"></el-input>
        </el-table-column>
        <el-table-column prop="standardCode" label="标准代码" align="center">
          <el-input v-model="standardCode"></el-input>
        </el-table-column>
        <el-table-column prop="subjectType" label="学科门类" align="center">
          <el-input v-model="subjectType"></el-input>
        </el-table-column>
        <el-table-column prop="trainingLevel" label="培养层次" align="center">
          <el-input v-model="trainingLevel"></el-input>
        </el-table-column>
        <el-table-column
          prop="standardEduSystem"
          label="标准学制"
          align="center"
        >
          <el-input v-model="standardEduSystem"></el-input>
        </el-table-column>
        <el-table-column prop="grantDegree" label="授予学位" align="center">
          <el-input v-model="grantDegree"></el-input>
        </el-table-column>
        <el-table-column prop="introduction" label="专业介绍" align="center">
          <el-input v-model="introduction"></el-input>
        </el-table-column>
      </el-table>
      <button
        @click="pjByIdGuidesave"
        style="
          width: 90px;
          height: 30px;
          border: 1px solid #f3b815;
          border-radius: 6px;
          color: #f3b815;
          margin-top: 20px;
          margin-left: 420px;
        "
      >
        保存
      </button>
    </el-dialog> -->
  </div>
</template>
<script>
import { 
  sczyxq,
  getSelectConditionPrint,
  bjzyxqsave,
  getSpeclist,
  removePro
} from "@/api/professional/details";
export default {
  data() {
    return {
      current:1,
      size:10,
      showManualEntryDialog: false,
      name: "",
      simpleName: "",
      standardCode: "",
      subjectType: "",
      trainingLevel: "",
      standardEduSystem: "",
      grantDegree: "",
      introduction: "",
      tableData: [],
    };
  },

  mounted() {
    console.log(this.$route.query.rowindex, "112212");
    this.getlist();
  },
  methods: {
    handleCurrentChange: function (val) {
      this.current = val
      this.getlist()
    },
    handleSizeChange: function (val) {
      this.size = val
      this.getlist()
    },
    destroyed() {undefined
    console.log('==离开页面==')
    },
    bj(index) {
      console.log(index, "*****************////////////////");
      this.index = index;
      this.$router.push({
        path: "/admin/professional/specialty",
        query: { rowins: index }
      });
    },
    //添加专业
    tjzy() {
      this.$router.push("/admin/professional/specialtysr");
    },
    //编辑专业详情保存

    //删除
    sc(ids) {
      this.$confirm('确认要删除吗？')
        .then(_ => {
          removePro(ids).then(res => {
            if(res.data.code == 200 && JSON.stringify(res.data.data) === '{}'){
              this.$message({
                showClose: true,
                message: '删除成功！',
                type: "success",
              });
              this.getlist();
            } else {
              this.$message({ type: "error", message: res.data.data, duration:5000 });
              this.getlist();
            }
          });
        })
    },
    //页面数据
    getlist() {
        if(this.$route.query.rowindex.school!=undefined){
          localStorage.setItem('school', this.$route.query.rowindex.school)
          localStorage.setItem('levelid', this.$route.query.rowindex.id)
        }
      let obj = {
        undertakeCollege: localStorage.getItem('school'),
        trainingleveid:localStorage.getItem('levelid')
      };
      getSpeclist(this.current,this.size,obj).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.cjrc-button {
  height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 2px 5px 0 0;
  }
}
.de-lucj-import-button{
  cursor: pointer;
  width: 90px;
  border-radius: 6px;
  display: block;
  background: #ffffff;
  border: none;
  background: #ffefef;
  border: 1px solid #ff3819;
  box-sizing: border-box;
  color: #ff3819;
  margin-left: 10px;
  img {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
}
.plan-entry-table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .bk-lucj-import-button {
    cursor: pointer;
    width: 90px;
    display: block;
    background: #ffffff;
    border-radius: 6px;
    border: none;
    background: #f1fff8;
    border: 1px solid #02c86c;
    box-sizing: border-box;
    color: #02c86c;
    img {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #004ca7;
    }
  }
  /deep/ .el-dialog {
    height: 350px !important;
  }
  .manual-entry-container {
    .el-dialog__body {
      height: 200px;
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;
        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);
          &:last-child {
            border-bottom: none;
          }
          > div {
            display: flex;
            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }
              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 90px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
  .bk-lucj-expot-button {
    .export-button;
    width: 156px;
    background: #fef1e8;
    border: 1px solid #f86900;
    box-sizing: border-box;
    float: left;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f86900;
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/entry-results.less";
.plan-entry-table-container {
  margin-top: 0;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>